<template>
  <template v-if="articleList.length">
    <div class="article-item" v-animate="['slideUpBigIn']" v-for="article of articleLists" :key="article.id">
      <!-- 文章缩略图 -->
      <div class="article-cover">
        <router-link :to="`/article/${article.id}`" href="">
          <img class="cover" v-lazy="article?.thumbnail" />
        </router-link>
      </div>
      <!-- 文章信息 -->
      <div class="article-info">
        <div class="article-meta">
          <!-- 置顶 -->
          <span class="top" v-if="article.isTop == 1">
            <svg-icon icon-class="top" size="14px" style="margin-right: 4px"></svg-icon>置顶</span
          >
          <!-- 发表时间 -->
          <span class="meta-item ml-3.75">
            <svg-icon icon-class="calendar" size="14px" style="margin-right: 4px; margin-left: 4px"></svg-icon
            >{{ formatDate(article.createTime) }}
          </span>
          <!-- 文章标签 -->
          <router-link class="meta-item ml-3.75" v-if="article.tagName">
            <svg-icon icon-class="tag" size="14px" style="margin-right: 4px; margin-left: 4px"></svg-icon
            >{{ article.tagName }}
          </router-link>
        </div>
        <!-- 文章标题 -->
        <h3 class="article-title">
          <router-link class="router-link" :to="`/article/${article.id}`">
            {{ article.title }}
          </router-link>
        </h3>
        <!-- 文章内容 -->
        <div class="article-content">{{ article.summary }}</div>
        <!-- 文章分类 -->
        <div class="article-category">
          <svg-icon icon-class="qizhi" size="10px" style="margin-right: 8px"></svg-icon>
          <span>{{ article.categoryName }}</span>
        </div>
        <!-- 阅读按钮 -->
        <router-link class="article-btn" :to="`/article/${article.id}`">详情</router-link>
      </div>
    </div>
  </template>
  <Pagination v-if="total > 5" :current="current" :total="total" @change-current="changeCurrent"></Pagination>
</template>

<script setup>
import { articleList } from '@/api/article';
import Pagination from '@/components/Pagination/index.vue';
import SvgIcon from '@/components/svgIcon/index.vue';
import { useArticleStore } from '@/store/article';
import { formatDate } from '@/utils/date';
import { storeToRefs } from 'pinia';
import { onMounted, reactive, toRefs, watch } from 'vue';
const { articleType } = storeToRefs(useArticleStore());
const data = reactive({
  total: 0,
  current: 1,
  articleLists: [],
});
const { total, current, articleLists } = toRefs(data);

onMounted(() => {
  getArticleList();
});

// 监听文章分类变化
watch(articleType, (newValue, oldValue) => {
  current.value = 1;
  getArticleList();
});

// 分页
const changeCurrent = (val) => {
  current.value = val;
  getArticleList();
};

// 查询文章
const getArticleList = async () => {
  const data = {
    pageNum: current.value,
    pageSize: 5,
    categoryId: articleType.value || 0,
  };
  const res = await articleList(data);
  if (res.code === 200) {
    articleLists.value = res.data.rows;
    total.value = Number(res.data.total);
  }
};
</script>

<style lang="scss" scoped>
.article-item {
  position: relative;
  display: flex;
  height: 220px;
  margin: 25px 10px 0;
  border-radius: 10px;
  box-shadow: 0 16px 18px -19px var(--box-bg-shadow);
  animation-duration: 0.5s;
  transition: all 0.2s ease-in-out 0s;
  visibility: hidden;

  &:hover {
    box-shadow: 0 0 30px var(--box-bg-shadow);

    .cover {
      transform: scale(1.05) rotate(1deg);
    }
  }

  &:nth-child(even) {
    flex-direction: row-reverse;

    .article-cover {
      margin-right: auto;
      margin-left: 20px;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
      border-radius: 0 16px 16px 0;
    }

    .article-info {
      padding: 10px 0 60px 20px;

      .article-meta {
        justify-content: flex-start;
      }
    }

    .article-btn {
      left: 0;
      right: auto;
      border-radius: 0 20px;
      background-image: linear-gradient(to right, var(--color-orange) 0, var(--color-pink) 100%);

      &:hover {
        transform: translateZ(10px);
      }
    }

    .article-category {
      right: 10px;
      justify-content: flex-start;
    }
  }
}

.article-cover {
  width: 50%;
  margin-right: 20px;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
  border-radius: 16px 0 0 16px;
  overflow: hidden;

  .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out 0s;
  }
}

.article-info {
  position: relative;
  width: 50%;
  padding: 10px 20px 60px 0;
  perspective: 300px;

  .article-meta {
    display: flex;
    justify-content: flex-end;
    font-size: 18px;
    color: var(--grey-5);
  }

  .top {
    color: var(--color-orange);
    font-size: 14px;
  }

  .meta-item {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .ml:not(:first-child) {
    margin-left: 16px;
  }

  .article-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 16px 0;
    color: var(--primary-color);
    overflow: hidden;
    font-size: 18px;
  }

  .article-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 100px;
    font-size: 16px;
    overflow: hidden;
  }
}

.article-category {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 10px;
  font-size: 14px;
  color: var(--grey-5);
}

.article-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 7px 20px;
  border-radius: 20px 0;
  color: var(--grey-0);
  background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);

  &:hover {
    transform: translateZ(10px);
  }
}
</style>
